<template>
  <el-dialog v-model="dialogVisible">
    <el-tree
      :data="treeData"
      show-checkbox
      :props="defaultProps"
      :default-expand-all="true"
      highlight-current
      ref="menuTree"
      node-key="id"
      :check-strictly="checkStrictly"
    ></el-tree>

    <template #footer>
      <el-button type="primary" @click="handleCheckAll">全部选择</el-button>
      <el-button type="warning" @click="handleSubmit">确认分配</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { IRole } from "@/api/role"
import { useMenuStore } from "@/stores/menu"
import { PropType } from "vue"
import { ElTree } from "element-plus"
import Node from "element-plus/es/components/tree/src/model/node.mjs"
import { allocRoleAccess, getRoleAccess } from "@/api/roleAccess"
import { useReloadPage } from "@/hooks/useReloadPage"

const checkStrictly = ref(false)
const { reloadPage } = useReloadPage()
const store = useMenuStore()
const treeData = computed(() => store.state.menuTreeData) // 所有的菜单
const defaultProps = {
  children: "children",
  label: "title"
}
type ElTreeInstance = InstanceType<typeof ElTree> //拿到el-tree实例
const menuTree = ref<ElTreeInstance | null>(null)

const { role, modelValue } = defineProps({
  role: {
    type: Object as PropType<IRole>,
    required: true
  },
  modelValue: {
    type: Boolean,
    default: false
  }
})
const dialogVisible = ref(modelValue)
const emit = defineEmits(["update:modelValue"])

watch(
  () => dialogVisible.value,
  (newValue) => {
    emit("update:modelValue", newValue)
  }
)
const getRoleAccessList = async () => {
  checkStrictly.value = true // 先解除父子关系，避免回显时父中有一个节点被选中，子节点被全部选中
  const res = await getRoleAccess(role.id)
  if (res.code === 0) {
    const access = res.data.map((item) => item.access_id)
    menuTree.value?.setCheckedKeys(access) //id组成的数组
    // 延时关联
    setTimeout(() => {
      checkStrictly.value = false
    }, 0)
  }
  //
}
// 全部选择按钮
const isCheckAll = ref(false)
const handleCheckAll = () => {
  if (!isCheckAll.value) {
    // setCheckedNodes必须设置  node-key="id"
    // 所有节点集合
    menuTree.value?.setCheckedNodes(treeData.value as unknown as Node[], false)
  } else {
    menuTree.value?.setCheckedNodes([], false)
  }
  isCheckAll.value = !isCheckAll.value
}
const { proxy } = getCurrentInstance()!
// 确认分配
const handleSubmit = async () => {
  const tree = menuTree.value!
  const keys = tree.getCheckedKeys(false) // 所有选中的节点
  const halfKeys = tree.getHalfCheckedKeys() // 半选中的节点
  const selectKeys = [...keys, ...halfKeys] // 所有选中的节点（含半选的）

  const res = await allocRoleAccess(role.id, selectKeys as number[])
  if (res.code === 0) {
    proxy?.$message.success("权限分配成功")
    reloadPage()
  }
}

onMounted(() => {
  getRoleAccessList()
  store.getAllMenuList()
})
</script>
